<template>
  <div>
    <xy-table
      :apiName="apiName"
      :columns="columns"
      :list="users"
      :queryColumn="queryColumn"
    >
      <template #addItem>
        <el-button
          @click="addItem"
          size="mini"
        >
          <i class="el-icon-plus"></i>
          {{ $language.local("添加") }}
        </el-button>

        <el-button @click="uploadFile">
          <i class="el-icon-upload2"></i>
          {{ $language.local("批量导入") }}
        </el-button>

        <!-- <el-button @click="addItem">
          <i class="el-icon-position"></i>
          签约小程序</el-button
        >-->
      </template>

      <template v-slot:log="{ scope }">
        <el-tooltip
          :content="$language.local('分配权限')"
          :enterable="false"
          class="item"
          effect="dark"
          placement="top"
        >
          <el-button
            @click="assignRole(scope.row)"
            circle
            icon="el-icon-setting"
            size="mini"
            type="info"
          ></el-button>
        </el-tooltip>
      </template>
    </xy-table>
    <!-- #region Dialog -->
    <el-dialog
      :visible.sync="isVisible"
      title="分配角色"
      width="30%"
    >
      <el-form
        :model="roleForm"
        :rules="$rules"
        label-width="80px"
        ref="assignRoleFromRef"
        status-icon
      >
        <el-form-item label="用户名">
          <xy-input
            disabled
            v-model="roleForm.userName"
          ></xy-input>
        </el-form-item>
        <el-form-item
          label="当前角色"
          prop="roleId"
        >
          <el-select
            clearable
            placeholder="请选择"
            v-model="roleForm.roleId"
          >
            <el-option
              :key="item.id"
              :label="item.name"
              :value="item.id"
              v-for="item in roles"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span
        class="dialog-footer"
        slot="footer"
      >
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button
          @click="onSubmit('assignRoleFromRef')"
          type="primary"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- #endregion -->
    <el-dialog
      :title="$language.local('添加')"
      :visible.sync="addDialogVisible"
      width="40%"
    >
      <el-form
        :model="addForm"
        :rules="$rules"
        label-width="100px"
        ref="addFormRef"
        status-icon
      >
        <el-form-item
          :label="$language.local('用户名')"
          prop="userName"
        >
          <xy-input
            clearable
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="addForm.userName"
          ></xy-input>
        </el-form-item>

        <el-form-item
          :label="$language.local('密码')"
          prop="password"
        >
          <xy-input
            clearable
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
            v-model="addForm.password"
          ></xy-input>
        </el-form-item>

        <el-form-item
          :label="$language.local('角色')"
          prop="roleId"
        >
          <el-select
            clearable
            placeholder="请选择"
            v-model="addForm.roleId"
          >
            <el-option
              :key="item.id"
              :label="item.name"
              :value="item.id"
              v-for="item in roles"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span
        class="dialog-footer"
        slot="footer"
      >
        <el-button @click="addDialogVisible = false">
          {{
          $language.local("取消")
          }}
        </el-button>
        <el-button
          @click="add('addFormRef')"
          type="primary"
        >
          {{
          $language.local("确定")
          }}
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="$language.local('批量导入')"
      :visible.sync="uploadDialogVisible"
      width="30%"
    >
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        class="upload-demo"
        drag
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div
          class="el-upload__tip"
          slot="tip"
        >上传文件不超过500kb</div>
      </el-upload>
      <span
        class="dialog-footer"
        slot="footer"
      >
        <el-button
          @click="uploadDialogVisible = false"
          type="primary"
        >
          {{
          $language.local("确定")
          }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from "../table/tableList";

export default {
  components: {
    "xy-table": Table,
  },
  data() {
    return {
      users: null,
      roles: [],
      apiName: "/api/Users",
      queryColumn: "userName",
      columns: {
        createTime: "创建时间",
        userName: "姓名",
        "role.name": "角色",
      },
      addForm: {
        userName: "",
        password: "",
        roleId: 1,
      },

      addDialogVisible: false,
      uploadDialogVisible: false,
      isVisible: false,
      roleForm: { roleId: 0 },
      assignFormRole: {
        roleId: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getUserRole();
  },
  methods: {
    async getUserRole() {
      let response = await this.$http.get("/api/Roles");
      console.log(response);
      if (response.ok) {
        this.roles = response.data;
      } else {
        console.error(response);
      }
    },
    assignRole(user) {
      console.log(user);
      this.isVisible = true;
      // this.roleForm = this.user;
      this.roleForm.roleId = user.role.id;
      this.roleForm.userName = user.userName;
      this.roleForm.userId = user.id;
    },
    async addItem() {
      this.addDialogVisible = true;
      console.log(this.roles);

      let role = this.roles.find((v) => v.name == "默认用户");
      // console.log(role);
      if (role) {
        this.addForm.roleId = role.id;
      }
      // this.addForm.roleId = this.roles.findIndex((v) => v.name == "默认用户");
    },
    add(formName) {
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }

        try {
          console.log(this.addForm);
          let response = await this.$http.post("/api/Users", this.addForm);
          console.log(response);
          this.$message.success("添加成功");
          this.users = [response.data];
        } catch (error) {
          console.error(error);
          this.$message.error(`${error}`);
        } finally {
          this.addDialogVisible = false;
        }
      });
    },
    uploadFile() {
      this.uploadDialogVisible = true;
    },
  },
};
</script>

<style></style>
